<template>
    <show-modal :title="title" :loading="loading" width="500px" @cancel="cancel" @submit="submit">
        <a-form-model ref="form" :model="form" :rules="rules" v-bind="layout">
            <a-form-model-item label="属性名称" prop="attName">
                <a-input v-model.trim="form.attName" placeholder="请输入属性名称" />
            </a-form-model-item>
            <a-form-model-item label="属性编码" prop="attCode">
                <a-input v-model.trim="form.attCode" :disabled="form.id?true:false" placeholder="请输入属性编码" />
            </a-form-model-item>
            <a-form-model-item label="属性类型" prop="attType">
                <a-select v-model="form.attType" placeholder="请选择属性类型">
                    <a-select-option v-for="item in paramTypes" :value="item.value" :key="item.value">{{
                        item.name
                    }}</a-select-option>
                </a-select>
            </a-form-model-item>
            <a-form-model-item label="数据类型" prop="dataType">
                <a-select v-model="form.dataType" placeholder="请选择数据类型" @change="selectDataType">
                    <a-select-option v-for="item in dataTypes" :value="item.value" :key="item.value"
                        >{{ item.name }}({{ item.value }})</a-select-option
                    >
                </a-select>
            </a-form-model-item>

            <template v-if="form.dataType == 'array'">
                <a-form-model-item label="元素类型" prop="properties">
                    <a-select v-model="form.properties" placeholder="请选择元素类型">
                        <a-select-option v-for="item in dataTypes" :value="item.value" :key="item.value"
                            >{{ item.name }}({{ item.value }})</a-select-option
                        >
                    </a-select>
                </a-form-model-item>
            </template>

            <template v-if="isBase">
                <a-form-model-item label="数据单位" prop="properties">
                    <a-select v-model="form.properties" placeholder="请选择数据单位">
                        <a-select-option v-for="item in baseUnits" :value="item.symbol" :key="item.symbol">{{
                            item.text
                        }}</a-select-option>
                    </a-select>
                </a-form-model-item>
            </template>

            <template v-if="form.dataType == 'text'">
                <a-form-model-item label="最大长度" prop="properties">
                    <a-input-number
                        type="number"
                        style="width:100%;"
                        v-model.trim="form.properties"
                        placeholder="请输入最大长度"
                    />
                </a-form-model-item>
            </template>
            <template v-if="form.dataType == 'bool'">
                <a-form-model-item label="布尔值" prop="properties">
                    <a-row type="flex" justify="center" v-for="item in boolean" :key="item.value">
                        <a-col :span="11">
                            <a-input v-model.trim="item.label" placeholder="请输入显示字符" />
                        </a-col>
                        <a-col :span="2" style="text-align:center;">~</a-col>
                        <a-col :span="11">
                            <a-input v-model.trim="item.value" placeholder="请输入对应值" />
                        </a-col>
                    </a-row>
                </a-form-model-item>
            </template>
            <template v-if="form.dataType == 'date'">
                <a-form-model-item label="时间格式" prop="properties">
                    <a-select v-model="form.properties" placeholder="请选择时间格式">
                        <a-select-option v-for="item in timeTypes" :value="item.value" :key="item.value">{{
                            item.name
                        }}</a-select-option>
                    </a-select>
                </a-form-model-item>
            </template>

            <template v-if="form.dataType == 'enum'">
                <a-form-model-item label="枚举项" prop="properties">
                    <a-row type="flex" justify="center" v-for="(item, i) in enumBox" :key="i">
                        <a-col :span="9">
                            <a-input v-model.trim="item.label" placeholder="请输入标识" />
                        </a-col>
                        <a-col :span="2" style="text-align:center;"
                            ><a-icon style="font-size:20px;" type="swap-right"
                        /></a-col>
                        <a-col :span="9">
                            <a-input v-model.trim="item.value" placeholder="请输入对应值" />
                        </a-col>
                        <a-col :span="4">
                            <a-icon
                                v-if="enumBox.length - 1 == i"
                                class="enum_btn"
                                @click="addEnum"
                                type="plus-circle"
                            />
                            <a-icon
                                v-if="enumBox.length > 1"
                                class="enum_btn"
                                @click="removeEnum(i)"
                                type="minus-circle"
                            />
                        </a-col>
                    </a-row>
                </a-form-model-item>
            </template>

            <template v-if="form.dataType == 'object'">
                <a-form-model-item label="JSON对象" prop="properties">
                    <a-button type="link" icon="plus">添加参数</a-button>
                </a-form-model-item>
            </template>

            <template v-if="form.dataType == 'file'">
                <a-form-model-item label="文件类型" prop="properties">
                    <a-select v-model="form.properties" placeholder="请选择文件类型">
                        <a-select-option v-for="item in fileTypes" :value="item.value" :key="item.value">{{
                            item.name
                        }}</a-select-option>
                    </a-select>
                </a-form-model-item>
            </template>

            <template v-if="form.dataType == 'password'">
                <a-form-model-item label="密码长度" prop="properties">
                    <a-input addon-after="字节" v-model.trim="form.properties" />
                </a-form-model-item>
            </template>
            <a-form-model-item label="是否只读">
                <a-switch :checked="form.readFlag == 1 ? true : false" @change="onChangeShow" />
            </a-form-model-item>
        </a-form-model>
    </show-modal>
</template>

<script>
import { rules } from './rules';
import { paramTypes, source, dataTypes, baseUnits, timeTypes, fileTypes } from '@/views/product/common/types';
import { addInfo, updateInfo } from '@/api/product/dictionary';

export default {
    name: 'CreateApply',
    props: {
        info: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            paramTypes,
            source,
            dataTypes,
            baseUnits,
            timeTypes,
            fileTypes,
            loading: false,
            rules,
            form: {
                attName: '',
                attCode: '',
                attType: undefined,
                dataType: undefined,
                properties: undefined,
                readFlag:'0',
                tag: 'product'
            },
            boolean: [
                {
                    label: '否',
                    value: 0
                },
                {
                    label: '是',
                    value: 1
                }
            ],
            enumBox: [{ label: '', value: '' }],
            layout: {
                labelCol: { span: 5 },
                wrapperCol: { span: 19 }
            }
        };
    },
    computed: {
        title() {
            if (this.parent) {
                return '新增属性';
            }
            return this.info?.id ? '修改属性' : '新增属性';
        },
        disabled() {
            return this.info?.id ? true : false;
        },
        isBase() {
            /**基本数据类型 需要选择单位 */
            let types = ['int', 'long', 'float', 'double'];
            let isBase = types.indexOf(this.form.dataType);
            return isBase >= 0 ? true : false;
        }
    },
    created() {
        this.form = { ...this.form, ...this.info };
        let {dataType=''} = this.info;
        if(dataType=='bool'){
            this.boolean = JSON.parse(this.info.properties);
        }
        if(dataType=='enum'){
            this.enumBox = JSON.parse(this.info.properties);
        }
            console.log(this.form)
    },
    methods: {
        submit() {
            let form = this.form
            if(form.dataType=='bool'){
                this.form.properties = JSON.stringify(this.boolean)
                // let properties = []
                // let boolean = this.boolean
                // for(let i in boolean){
                //     properties[i] = boolean[i].value+':'+boolean[i].label
                // }
                // this.form.properties = properties.join(' ')
            }
            if(form.dataType=='enum'){
                this.form.properties = JSON.stringify(this.enumBox)
            }
            
            this.$refs.form.validate(async valid => {
                if (valid) {
                    if (this.form.id) {
                        await updateInfo(this.form);
                        this.$message.success('修改成功!');
                    } else {
                        await addInfo(this.form);
                        this.$message.success('添加成功!');
                    }
                    this.$emit('submit');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //取消
        cancel() {
            this.$emit('cancel');
        },
        //枚举添加
        addEnum() {
            let len = this.enumBox.length;
            let obj = { label: '', value: '' };
            this.enumBox.splice(len, 0, obj);
        },
        //删除枚举
        removeEnum(i) {
            this.enumBox.splice(i, 1);
        },
        //选择数据类型
        selectDataType(e){
            this.form.properties = undefined;
        },
        //切换状态
        onChangeShow(checked) {
            if (checked) {
                this.form.readFlag = '1';
            } else {
                this.form.readFlag = '0';
            }
        },
    }
};
</script>

<style lang="scss" scoped>
.enum_btn {
    margin: 0 5px;
    font-size: 18px;
    vertical-align: -5px;
}
</style>
